<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05-onpopstate 事件</title>
</head>
<body>
    <a href="#/product">产品</a>
   <script>
      window.onpopstate = function(event){
          alert("location"+document.location+",state:"+JSON.stringify(event.state))
      }
      //绑定事件处理函数
       //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
      history.pushState({page:1},"title 1","?page=1");
      //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
      history.pushState({ page: 2 }, "title 2", "?page=2");
      //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
       history.replaceState({ page: 3 }, "title 3", "?page=3"); 
        //  history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
            //  history.back(); // 弹出 "location: http://example.com/example.html, state: null
            history.go(2); // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}
   </script> 
</body>
</html>